<template>
  <div>
      <div style="float: flex;display: flex;margin-top: 30px;">
          <span class="tableName">表名称:{{tableName}}</span>
      </div>
      <!-- 右 -->
        <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;" >
            <el-button v-if="isRelease==2"
                disabled
                title="表单已经部署无法操作"
                size="mini"
                type="primary"
                @click="insertGeneratorFormInner"><i class="el-icon-plus"></i><span>新增字段</span>
            </el-button>
            <el-button v-if="isRelease==1"
                size="mini"
                type="primary"
                @click="insertGeneratorFormInner"><i class="el-icon-plus"></i><span>新增字段</span>
            </el-button>
            <el-button v-if="isRelease==2"
                size="mini"
                type="success"
                @click="businessTableStructure"><i class="el-icon-notebook-1"></i><span>表结构</span>
            </el-button>
            <el-button v-if="isRelease==1"
                disabled
                title="表单未部署无法操作"
                size="mini"
                type="success"
                @click="businessTableStructure"><i class="el-icon-notebook-1"></i><span>表结构</span>
            </el-button>
            <el-button v-if="isRelease==2"
                disabled
                title="表单已经部署无法操作"
                size="mini"
                type="success"
                @click="addGeneratorFormInner"><i class="el-icon-s-promotion"></i><span>表单部署</span>
            </el-button>
            <el-button v-if="isRelease==1"
                size="mini"
                type="success"
                @click="addGeneratorFormInner"><i class="el-icon-s-promotion"></i><span>表单部署</span>
            </el-button>
            <el-button
                size="mini"
                type="primary"
                @click="returnGeneratorForm"><i class="el-icon-arrow-left"></i><span>返回</span>
            </el-button>
        </div>
      <div style="margin-top: 20px;">
           <el-table
                :data="GeneratorFormInnerList"
                size="small"
                stripe
                border
                style="width: 100%"
                >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
                <el-table-column
                        label="字段代码"
                        width="200">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>表结构编号: {{ scope.row.businessId }}</p>
                            <p>字典编号: {{ scope.row.dictionaryId }}</p>
                            <p>字典代码: {{ scope.row.dictionaryName }}</p>
                            <p>类型长度: {{ scope.row.typeLength }}</p>
                            <p>字段代码: {{ scope.row.fieldName }}</p>
                            <p>字段描述: {{ scope.row.showName }}</p>
                            <p>表单编号: {{ scope.row.generatorId }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.fieldName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="字段描述"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.showName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="字典代码" :show-overflow-tooltip="true"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.dictionaryName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="类型长度"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.typeLength }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="isRelease==1"
                                size="mini"
                                type="primary"
                                @click="updateGeneratorFormInner(scope.row)"><i class="el-icon-edit"></i><span>编辑</span></el-button>
                        <el-button v-if="isRelease==2"
                                disabled
                                title="表单已经部署无法操作"
                                size="mini"
                                type="primary"
                                @click="updateGeneratorFormInner(scope.row)"><i class="el-icon-edit"></i><span>编辑</span></el-button>
                        <el-button v-if="isRelease==1"
                                size="mini"
                                type="danger"
                                @click="deleteGeneratorFormInner(scope.row)"><i class="el-icon-delete"></i><span>删除</span></el-button>
                        <el-button v-if="isRelease==2"
                                title="表单已经部署无法操作"
                                disabled
                                size="mini"
                                type="danger"
                                @click="deleteGeneratorFormInner(scope.row)"><i class="el-icon-delete"></i><span>删除</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>

       <!-- 新增编辑弹框 -->
        <div>
            <el-dialog
                    :title="title_Innser"
                    :visible.sync="dialogVisible_Innser"
                    width="60%">
                <div>
                    <el-form :model="Innser" :rules="rules" ref="InnserForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="字段代码:" prop="fieldName">
                                    <el-input size="mini" style="width: 250px" prefix-icon="el-icon-edit" v-model="Innser.fieldName"
                                              placeholder="请输入字段代码(英文格式)"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="字段描述:" prop="showName">
                                    <el-input size="mini" style="width: 250px" prefix-icon="el-icon-edit" v-model="Innser.showName"
                                              placeholder="请输入字段描述"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="字段类型:" prop="dictionaryId">
                                    <el-select style="width: 250px" v-model="Innser.dictionaryId" placeholder="请选择字段类型">
                                        <el-option
                                        v-for="item in dictionarys"
                                        :key="item.dictionaryId"
                                        :label="item.dictionaryName"
                                        :value="item.dictionaryId">
                                            <span style="float: left">{{ item.dictionaryName }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictionaryRemarks }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="字段长度:" prop="typeLength">
                                    <el-input-number style="width: 250px" v-model="Innser.typeLength" :min="0" label="请设置字段长度"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible_Innser = false">取 消</el-button>
                    <el-button type="primary" @click="insertInnserRequest">确 定</el-button>
                </span>
            </el-dialog>

            <div>
            <el-drawer
                title="业务表结构"
                :visible.sync="BusinessTableStructureFlag"
                :before-close="handleClose">
                    <div style="margin-top: 80px;">
                        <el-table :data="BusinessTableStructure">
                            <el-table-column property="COLUMN_NAME" label="字段名称"></el-table-column>
                            <el-table-column property="COLUMN_TYPE" label="字段类型"></el-table-column>
                            <el-table-column property="IS_NULLABLE" label="能否为空"></el-table-column>
                            <el-table-column property="COLUMN_COMMENT" label="字段含义"></el-table-column>
                        </el-table>
                    </div>
                </el-drawer>
        </div>
        </div>
  </div>
</template>

<script>

export default {
    name:"GeneratorFormInnerInner",
     data(){
        return{
            GeneratorFormInnerList:[],
            tableName:'',
            isRelease:1,
            generatorId:'',
            // 弹框属性
            title_Innser:'',
            dialogVisible_Innser: false,
            dictionarys:[],
            Innser:{
                businessId: '',
                dictionaryId: '',
                fieldName: '',
                generatorId: this.generatorId,
                showName: '',
                typeLength: 0
            },
            // 表结构
            BusinessTableStructure:[],
            BusinessTableStructureFlag: false,
             // 校验规则
            rules: {
                fieldName:[{required:true,message:'请输入字段名称',trigger:'blur'}
                ],
                showName:[{required: true, message: '请输字段描述', trigger: 'blur'}],
                dictionaryId:[{required: true, message: '请选择字段类型', trigger: 'blur'}],
                typeLength:[{required: true, message: '请设置字段长度', trigger: 'blur'}]
            },
            // 表单部署内容
            DeployGeneratorFormBO:{
                generatorId: '',
                fieldsList:[]
            }
        }
    },
    mounted(){
        this.initGeneratorFormInnerListQuery();
    },
    methods:{
        initGeneratorFormInnerListQuery(){
            let generatorFormOne = JSON.parse(this.$route.query.generatorFormOne);
            this.tableName = generatorFormOne.tableName;
            this.isRelease = generatorFormOne.isRelease;
            this.generatorId = generatorFormOne.generatorId;
            this.getRequest("/activity/GeneratorBusiness/query/GeneratorBusinessByGeneratorId?generatorId="+this.generatorId).then(resp => {
                if (resp) {
                    this.GeneratorFormInnerList = resp.data;
                    this.total = resp.data.total;
                }
            });
        },
        // 表单部署
        addGeneratorFormInner(){
            this.DeployGeneratorFormBO.generatorId = this.generatorId;
            this.GeneratorFormInnerList.forEach((item)=>{
                let field = {
                    fieldCode: '',
                    fieldType: '', 
                    showName: '',  
                    fieldLength: 0 
                }
                field.fieldCode = item.fieldName;
                field.fieldType = item.dictionaryName;
                field.showName = "'"+item.showName+"'";
                field.fieldLength = item.typeLength;
                this.DeployGeneratorFormBO.fieldsList.push(field);
            }),
            this.$confirm('此操作将表单部署创建业务表,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.putRequest('/activity/GeneratorForm/create/DeployGeneratorForm',this.DeployGeneratorFormBO).then(resp=>{
                    if (resp){
                        // 部署成功，路由表单管理界面
                        this.$router.push('/FormManager');
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 表结构
        businessTableStructure(){
            this.getRequest("/activity/GeneratorForm/query/BusinessTableStructure?tableName="+this.tableName).then(resp => {
                if (resp) {
                    this.BusinessTableStructure = resp.data;
                    this.BusinessTableStructureFlag = true;
                }
            });
        },
        // 关闭表结构信息
        handleClose(done) {
            done();
        },
        // 返回表单管理
        returnGeneratorForm(){
            this.$router.push('/FormManager');
        },
        // 查询字段类型
        queryDictionarys(){
            this.getRequest("/activity/GeneratorDictionary/query/GeneratorDictionaryList").then(resp => {
                if (resp) {
                    this.dictionarys = resp.data;
                }
            });
        },
        // 新增弹框
        insertGeneratorFormInner(){
            this.title_Innser = "新增字段";
            this.dialogVisible_Innser = true;
            this.initGeneratorFormInner();
            this.queryDictionarys();
        },
        // 编辑弹框
        updateGeneratorFormInner(data){
            this.title_Innser = "编辑字段";
            this.dialogVisible_Innser = true;
            this.Innser = data;
            this.queryDictionarys();
        },
        // 删除字段
        deleteGeneratorFormInner(data){
            this.$confirm('此操作将永久删除【'+data.fieldName+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/GeneratorBusiness/delete/GeneratorBusinessByBusinessId?businessId='+data.businessId).then(resp=>{
                    if (resp){
                        this.initGeneratorFormInnerListQuery();
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 初始化弹框内容
        initGeneratorFormInner(){
            this.Innser.businessId = '';
            this.Innser.dictionaryId = '';
            this.Innser.fieldName = '';
            this.Innser.generatorId = this.generatorId;
            this.Innser.showName = '';
            this.Innser.typeLength = 0;
        },
        // 添加|编辑字段
        insertInnserRequest(){
            if (this.Innser.businessId) {
                    this.$refs['InnserForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/activity/GeneratorBusiness/update/GeneratorBusiness", this.Innser).then(resp => {
                                if (resp) {
                                    this.dialogVisible_Innser = false;
                                    this.initGeneratorFormInner();
                                    this.initGeneratorFormInnerListQuery();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['InnserForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/activity/GeneratorBusiness/insert/GeneratorBusiness", this.Innser).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible_Innser = false;
                                this.initGeneratorFormInner();
                                // 初始化列表
                                this.initGeneratorFormInnerListQuery();
                            }
                        })
                    }
                });
            }
        }
    }
}

</script>

<style>

    .tableName{
        text-align: center;
        font-size: 30px;
        font-family: 宋体;
        color: #409eff;
        padding-top: 50px;
    }
</style>